/* 首页动画 */


/*预加载*/
.load{ position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; z-index: 99999; background: #fff; }
/* .load .bar{position: absolute; left: 0; top: 0; background: #333; width: 0; height: 2px;  transition: 0.5s;} */
.load .logo{ animation: logo 2s ease infinite; height: 100%; display: flex; align-items: center; justify-content: center;}
.load .logo img{width: 13.0208vw;}
@keyframes logo{
    0%{ opacity: 1; }
    30%{ opacity: 0.1; }
    100%{  opacity: 1; }
}

body.fixed{position: fixed;}







.home_part1::after{content: ''; position: absolute; right: 3.6458vw; bottom: 3.125vw; width: 1.0417vw; height: 6.3542vw; background: url(../newimages/home/ico_bottom.svg) center no-repeat; background-size: contain; z-index: 1; opacity: 0; transform: translateY(40px); transition: 0.6s 1.6s ease-out; animation: scrollBottom 1.6s linear infinite;}
.home_part1 .title{opacity: 0; transform: translateY(40px); transition: 0.6s 1s ease-out;}
.home_part1 .c_h24{opacity: 0; transform: translateY(40px); transition: 0.6s 1.4s ease-out;}
.home_part1 .tlt{opacity: 0; transform: translateY(40px); transition: 0.6s 1.3s ease-out;}
.home_part1 .box::before{opacity: 0; transform: translateY(40px); transition: 0.6s 1.5s ease-out;}

.home_part1.on .title,
.home_part1.on .c_h24,
.home_part1.on .tlt,
.home_part1.on .box::before,
.home_part1.on::after{opacity: 1; transform: translateX(0);}
.home_part1.on .box::after{ right: 0; width: 100%; transform:translateX(0);}
@keyframes scrollBottom{
    0%{ transform: translateY(0); }
    30%{ transform: translateY(8px); }
    100%{ transform: translateY(0); }
}



.home_part2 .c_tit,
.home_part2 .c_h46,
.home_part2 .box1,
.home_part2 .row_1,
.home_part2 .row_2{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity; }

.home_part2.on .box1{transition-delay: 0.2s;}
.home_part2.on .row_1{transition-delay: 0.4s;}
.home_part2.on .row_2{transition-delay: 0.6s;}

.home_part2.on .c_tit,
.home_part2.on .c_h46,
.home_part2.on .box1,
.home_part2.on .row_1,
.home_part2.on .row_2{transform: translateY(0); opacity: 1; }



.home_part3 .wrap>div{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}

.home_part3.on .tab_box{transition-delay: 0.2s;}
.home_part3.on .cont{transition-delay: 0.4s;}

.home_part3.on .wrap>div{transform: translateY(0); opacity: 1; }



.home_part5 .c_h46,
.home_part5 .tet,
.home_part5 .tat{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}

.home_part5.on .tet{transition-delay: 0.2s;}
.home_part5.on .tat{transition-delay: 0.4s;}

.home_part5.on .c_h46,
.home_part5.on .tet,
.home_part5.on .tat{transform: translateY(0); opacity: 1; }



.home_part6 .c_h46,
.home_part6 .tet,
.home_part6 .tat{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}

.home_part6.on .tet{transition-delay: 0.2s;}
.home_part6.on .tat{transition-delay: 0.4s;}

.home_part6.on .c_h46,
.home_part6.on .tet,
.home_part6.on .tat{transform: translateY(0); opacity: 1; }



.home_part7 .c_h46,
.home_part7 .tet,
.home_part7 .tat,
.home_part7 .col_2{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}

.home_part7.on .tet{transition-delay: 0.2s;}
.home_part7.on .tat{transition-delay: 0.4s;}
.home_part7.on .col_2{transition-delay: 0.6s;}

.home_part7.on .c_h46,
.home_part7.on .tet,
.home_part7.on .tat,
.home_part7.on .col_2{transform: translateY(0); opacity: 1; }



.home_part4 .dd1{ transition: 2s; transform: translateX(7.2917vw) scale(0.9);}
.home_part4 .dd1.on{transform: translateX(0);}

.home_part4 .cont .box>div>div{ transition: 0.6s 0.0s; transform: translateY(100%); }
.home_part4 .cont .box .c_h46{transition-delay: 0.15s;}
.home_part4 .cont .box .tet{transition-delay: 0.2s;}
.home_part4 .cont .box .tat{transition-delay: 0.35s;}
.home_part4 .cont.on .box>div>div{transform: translateY(0); }
.home_part4 .cont.on1{pointer-events: none;}
.home_part4 .cont.on1 .box>div>div{transform: translateY(100%); }

.home_part4 .dd2{transition: 0.8s cubic-bezier(0.42, 0, 0.58, 1);}
.home_part4 .dd2.on{ transform: translateX(-33.9583vw); transition-delay: 0s;}
.home_part4 .dd2.on1{ transform: translateX(-62.5vw);}

.home_part4 .dd1 img{ opacity: 1; transform: translateX(0); transition: 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
.home_part4 .dd1 img.on{opacity: 1; transform: translateX(-26.0417vw);}
.home_part4 .dd1 img.on1{opacity: 0;}

.home_part4 .dd3{opacity: 0; transition: 0.6s cubic-bezier(0.42, 0, 0.58, 1);}
.home_part4 .dd3.on{opacity: 1;}

.home_part4 .dd4{transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1); height: 0;}
.home_part4 .dd4.on{height: calc(100% - 6.25vw)}

.home_part4 .dd5{transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1); opacity: 0;}
.home_part4 .dd5.on{ opacity: 1;}

.home_part4 .swiper_tab{transition: all 0.8s cubic-bezier(0.42, 0, 0.58, 1); opacity: 0;}
.home_part4 .swiper_tab.on{ opacity: 1;}

.home_part4 .list{transition: 0.8s cubic-bezier(0.42, 0, 0.58, 1); opacity: 0; transform: translateY(3.125vw);}
.home_part4 .list.on{opacity: 1; transform: translateY(0);}

.home_part4 .list .img1 img{opacity: 0; transform: translateY(3.125vw); transition: 0.8s 0.4s cubic-bezier(0.42, 0, 0.58, 1);}
.home_part4 .list.on .swiper-slide-active .img1 img{opacity: 1;  transform: translateY(0);}

.home_part4 .list .cont1>div{opacity: 0; transform: translateY(-3.125vw); transition: 0.8s 0.4s cubic-bezier(0.42, 0, 0.58, 1);}
.home_part4 .list.on .swiper-slide-active .cont1>div{opacity: 1;  transform: translateY(0);}

.home_part4 .list .swiper-slide .box{transform: scale(0.8); opacity: 0.5; transition: 1s;}
.home_part4 .list .swiper-slide-active .box{transform: scale(1); opacity: 1;}







.home_part4 .cont .box>div{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}


.home_part4 .col_1.on .cont .box>div:nth-child(2){transition-delay: 0.2s;}
.home_part4 .col_1.on .cont .box>div:nth-child(3){transition-delay: 0.4s;}
.home_part4 .col_1.on .cont .box>div:nth-child(4){transition-delay: 0.6s;}
.home_part4 .col_1.on .cont .box>div{transform: translateY(0); opacity: 1; }


.home_part4 .list_box{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}
.home_part4 .col_2.on .list_box{transform: translateY(0); opacity: 1; }

@media screen and (max-width: 1200px){
    .load .logo img{width: 150px;}
}

@media screen and (max-width: 758px){
    .home_part5 .list{transform: translateY(50px); transition: 1s; opacity: 0; transition-property: transform, opacity;}

    .home_part5.on .list{transform: translateY(0); opacity: 1; transition-delay: 0.6s; }
}